<template>
  <div class="image-option-panel">
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane label="基础配置" name="basic">
        <div class="config-section">
          <el-form label-position="top">
            <el-form-item label="应用标识">
              <el-input 
                v-model="localConfig.appId" 
                placeholder="请输入appId"
                @change="(val:any) => updateField('appId', val)"
              />
            </el-form-item>
            <el-form-item label="渲染地址">
              <el-input 
                v-model="localConfig.cloudUrl" 
                placeholder="请输入渲染地址"
                @change="(val:any) => updateField('cloudUrl', val)"
              />
            </el-form-item>
            <el-form-item label="渲染授权">
              <el-input 
                v-model="localConfig.authorization" 
                type="textarea" 
                :rows="6"
                placeholder="请输入授权信息"
                @change="(val:any) => updateField('authorization', val)"
              />
            </el-form-item>
            <el-form-item label="自动取流">
              <el-radio-group v-model="localConfig.autoplay" @change="(val:any) => updateField('autoplay', val)">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
			<el-form-item label="超时时间(秒)">
				<el-input-number v-model="localConfig.timeout"  @change="(val:any) => updateField('timeout', val)" :step="1" :min="0" :max="500" controls-position="right"/>
			</el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import {
  Check,
  Delete,
  Plus,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

interface Props {
  componentId?:string,
  appId?: string
  cloudUrl?: string
  authorization?: string
  autoplay?: boolean
  timeout?:number
  [key: string]: any
}

const props = defineProps<Props>()
const emit = defineEmits(['config-change'])
const activeTab = ref('basic')

const localConfig = reactive<Record<string, any>>({
  componentId: props.componentId || '',
  appId: props.appId || '',
  cloudUrl: props.cloudUrl || '',
  authorization: props.authorization || '',
  timeout: props.timeout || 60,
  autoplay: typeof props.autoplay === 'boolean' ? props.autoplay : false,
})

function updateField(key: string, value: any) {
  localConfig[key] = value
  emit('config-change', { key, value })
}

// 监听 props 字段变化，自动同步本地表单
watch(
  () => ({ ...props }),
  (newProps) => {
    localConfig.appId = newProps.appId || ''
    localConfig.cloudUrl = newProps.cloudUrl || ''
    localConfig.authorization = newProps.authorization || ''
	localConfig.timeout = newProps.timeout || 60
    localConfig.autoplay = typeof newProps.autoplay === 'boolean' ? newProps.autoplay : false
  },
  { immediate: true, deep: true }
)

</script>

<style scoped>
.image-option-panel {
  width: 100%;
  height: 100%;
  background: var(--art-main-bg-color);
}
.config-tabs {
  height: 100%;
}
.config-section {
  padding: 16px 0;
}
.event-tool-bar{
    height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* border-bottom: 1px solid var(--art-card-border); */
    margin-bottom: 5px;
    border-left: 2px solid #5d87ff;
    background: #5d87ff21;
}
.event-binding-list{

    .event-binding-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        background: rgba(0, 0, 0, 0.05);
        padding-left: 8px;
        margin-bottom: 5px;
    }
}



</style>
  